<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <title>DocSearch playground</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://127.0.0.1:8080/docsearch.min.css" />
  </head>
  
  <body>
    <div class="container">
      <div class="mt-1">
        <h1>Assets are served from http://127.0.0.1:8080/ </h1>
      </div>
      <div class="col-md-12">
        <div class="input-group">
          <input type="search" placeholder="DocSearch input" class="form-control" id="q">
        </div>
      </div>
    </div>
    <!-- at the end of the BODY -->
    <script src="http://127.0.0.1:8080/docsearch.js"></script>
    <script>
      docsearch({
        apiKey: '25626fae796133dc1e734c6bcaaeac3c',
        indexName: 'docsearch',
        inputSelector: '#q',
        handleSelected(input, event, suggestion, datasetNumber, context) {
          console.info(input);
          console.info(event);
          console.info(suggestion);
          console.info(datasetNumber);
          console.info(context);
        },
        debug: true // Set debug to true if you want to inspect the dropdown
      });
    </script>
    <style>

      .container {
        margin: 10%;
      }

      .input-group {
        width: 60%;
        margin: auto;
        margin-top: 10%;
      }
    </style>
  </body>

</html>
